.container {
  display: grid;
  /* 4x4 网格 */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: 'A A A B' 'D a b B' 'D d c B' 'D C C C';
  gap: 8px;
  animation: parent 10s infinite linear;
  width: 500px;
  height: 500px;
  margin: 200px auto;
}
@keyframes parent {
  to {
    transform: rotate(360deg);
  }
}
.container .grid_item {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 2px solid black;
}
.container .grid_item:nth-child(1) {
  grid-area: A;
}
.container .grid_item:nth-child(2) {
  grid-area: B;
}
.container .grid_item:nth-child(3) {
  grid-area: C;
}
.container .grid_item:nth-child(4) {
  grid-area: D;
}
.container .grid_item:nth-child(5) {
  grid-area: a;
}
.container .grid_item:nth-child(6) {
  grid-area: b;
}
.container .grid_item:nth-child(7) {
  grid-area: c;
}
.container .grid_item:nth-child(8) {
  grid-area: d;
}
.container .grid_item img {
  width: 350%;
  height: 350%;
  object-fit: cover;
  /*避免图片失去比例*/
  animation: children 10s infinite linear;
}
@keyframes children {
  to {
    transform: rotate(-360deg);
  }
}
